<template>
	<view>
		<view class="shop_search">
			<view class="shop_header">
				<!-- <u-search shape="square" :showAction="false" bgColor="white" inputAlign="left" height="40"></u-search> -->
				<view class="index_search">
					<u-icon name="arrow-left" @click="back"></u-icon>
					<view class="searchF">
						<u-search v-model="searchVal" placeholder="请输入关键字" @custom="searchEnd"></u-search>
					</view>


				</view>


			</view>
			<view class="shop_main">
				<view class="content_title">
					历史记录
				</view>
				<view class="content_list">
					<view class="content_tab" @click="searchTab(item.sname)" v-for="item in userShopList">{{item.sname}}
					</view>
					<!-- <view class="content_tab">大赛大</view>
					<view class="content_tab">大赛大</view> -->
				</view>

			</view>
			<view class="shop_main">
				<view class="content_title">
					热门搜索
				</view>
				<view class="content_list">
					<view class="content_tab" @click="searchEndTab(item.item_shops,item.item_id)"
						v-for="item in otherShopList">
						{{item.item_shops}}
					</view>
					<!-- <view class="content_tab">大赛大</view>
					<view class="content_tab">大赛大</view> -->
				</view>

			</view>
		</view>
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
			<view class="popup_box_1" v-if="popList.length==0">
				暂无数据
			</view>
			<view class="popup_box_2" v-if="popList.length!=0">
				<view class="popup_tab" @click="jumpDetial(item.item_id)" v-for="item in popList">
					{{item.item_shops}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				searchVal: "",
				otherShopList: [],
				userShopList: [],
				popList: [],
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}]
			};
		},
		async onShow() {
			// if(uni.getStorageSync(""))

			await this.otherList()
			if (uni.getStorageSync("_id")) {
				await this.getUserSearch()
			} else {
				uni.hideLoading()
			}

		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			jumpDetial(sid) {
				console.log(sid);
				uni.setStorageSync("sid", sid)
				uni.removeStorageSync("flat")
				uni.navigateTo({
					url: `/pages/detail/detail?sid=${sid}&flat=0`
				})

				// uni.setStorageSync("sid", sid)
				// uni.navigateTo({
				// 	url: "/pages/detail/detail"
				// })
			},
			getUserSearch() {
				uniCloud.callFunction({
					name: "user_old_search",
					data: {
						uid: uni.getStorageSync("_id")
					}
				}).then(res => {
					this.userShopList = res.result.data
					console.log()
					uni.hideLoading()
				})
			},
			searchEnd() {
				console.log(this.searchVal)
				if (this.searchVal != "") {
					uni.showLoading({
						title: "加载中..."
					})
					uniCloud.callFunction({
						name: "search_shop",
						data: {
							item_title: this.searchVal
						}

					}).then((res) => {
						// console.log(res, 7979)
						this.popList = res.result.data
						console.log(this.popList)
						// this.userShopList.unshift(this.searchVal)
					}).then(() => {
						uniCloud.callFunction({
							name: "user_search_shop",
							data: {
								sname: this.searchVal,
								uid: uni.getStorageSync("_id") || "游客"
							}
						}).then((res) => {
							console.log(res)
							this.userShopList = res.result.data
							this.show = true
							this.searchVal = ""
							uni.hideLoading()
						})
					})
				}
			},
			otherList() {
				uni.showLoading({
					title: "加载中"
				})
				uniCloud.callFunction({
					name: "orther_shop",

				}).then((res) => {
					console.log(res, 4545)
					this.otherShopList = res.result.data
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			async searchTab(x) {
				uni.showLoading({
					title: "加载中..."
				})
				await uniCloud.callFunction({
					name: "search_shop",
					data: {
						item_title: x
					}
				}).then((res) => {
					// console.log((res))
					this.popList = res.result.data
					console.log(this.popList)
				}).then(() => {
					uniCloud.callFunction({
						name: "user_search_shop",
						data: {
							sname: x,
							uid: uni.getStorageSync("_id") || "游客"
						}
					}).then((res) => {
						console.log(res)
						this.userShopList = res.result.data
						this.show = true

						uni.hideLoading()
					})
				})

			},
			async searchEndTab(x, sid) {
				uni.showLoading({
					title: "加载中..."
				})
				await uniCloud.callFunction({
					name: "user_search_shop",
					data: {
						sname: x,
						uid: uni.getStorageSync("_id") || "游客"
					}
				}).then((res) => {
					console.log(res)
					this.userShopList = res.result.data
				}).then(() => {
					uni.setStorageSync("sid", sid)
					uni.removeStorageSync("flat")
					uni.navigateTo({
						url: `/pages/detail/detail?sid=${sid}&flat=0`
					})
				})

			}
		}

	}
</script>

<style lang="scss">
	.popup_box_1 {
		min-height: 100px;
		width: 300px;
		text-align: center;
		font-weight: 100;
		line-height: 100px;
	}

	.popup_box_2 {
		font-weight: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;

		.popup_tab {
			padding: 10px 100px;
			border-bottom: 1px solid whitesmoke;
			box-sizing: border-box;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.shop_main {
		margin: 40rpx;

		.content_list {
			display: flex;
			width: 100%;
			flex-wrap: wrap;

			.content_tab {
				padding: 4px 10px;
				border-radius: 10px;
				background-color: #f2f2f2;
				color: #666;
				font-weight: 100;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}

		.content_title {
			margin: 20rpx 0;
		}

		.content1 {
			height: 180rpx;
			background-color: #999;
			margin-right: 30rpx;

			.content_img {
				height: 100%;
				width: 90px;
			}
		}
	}

	.shop_search {
		height: 100vh;
		background-color: white;
		width: 100%;

		.shop_header {
			margin: 0 14px;
			padding-top: 20px;

			.index_search {
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.searchF {
					width: 92%;
				}

			}
		}

	}
</style>